<?php
// 从数据库中获取数据的通用函数
function getData($tableName) {
    global $wpdb;
    return $wpdb->get_results("SELECT * FROM $tableName ORDER BY sort ASC");
}

// 获取常用网址和工具导航数据
$urls = getData("ningm_urls_list");
$tools = getData("ningm_tools_list");
$webs = getData("ningm_web_list");
$projects = getData("ningm_project_list");
$hereLinks = getData("ningm_here_list");
$friendLinks = getData("ningm_friend_list");

// 递归函数来生成树形结构
function buildTree(array $elements, $parentId = 0): array {
    $branch = [];
    foreach ($elements as $element) {
        if ($element->parent == $parentId) {
            $children = buildTree($elements, $element->id);
            $element->children = $children;
            $branch[] = $element;
        }
    }
    return $branch;
}

// 生成网址和工具列表
$urlsTree = buildTree($urls);
$toolsTree = buildTree($tools);
$websTree = buildTree($webs);
$projectsTree = buildTree($projects);
$hereLinksTree = buildTree($hereLinks);
$friendLinksTree = buildTree($friendLinks);

// 提取生成内容的函数
function renderTabContent($items, $activeClass = '') {
    ob_start(); // 开启输出缓冲
    foreach ($items as $item): ?>
        <div class="card">
            <div class="card-body">
                <h5>
                    <?php if (!empty($item->icon)): ?>
                        <i class="<?php echo esc_attr($item->icon); ?> me-2"></i>
                    <?php endif; ?>
                    <?php echo esc_html($item->name); ?>
                </h5>
                <?php if (!empty($item->children)): ?>
                    <div class="children mt-2">
                        <?php foreach ($item->children as $child): ?>
                            <a href="<?php echo esc_url($child->url); ?>" target="<?php echo esc_attr($child->target); ?>" class="<?php echo esc_attr($child->class); ?>">
                                <?php if (!empty($child->icon)): ?>
                                    <i class="<?php echo esc_attr($child->icon); ?> me-2"></i>
                                <?php endif; ?>
                                <?php echo esc_html($child->name); ?>
                            </a>
                        <?php endforeach; ?>
                    </div>
                <?php endif; ?>
            </div>
        </div>
    <?php endforeach;
    return ob_get_clean(); // 获取缓冲内容并关闭缓冲
}
?>

<div class="main-container mt-5">
    <!-- 导航标签 -->
    <ul class="nav nav-tabs" id="myTab" role="tablist">
        <li class="nav-item" role="presentation">
            <a class="nav-link active" id="urls-tab" data-bs-toggle="tab" href="#urls" role="tab" aria-controls="urls" aria-selected="true">常用网址</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="webs-tab" data-bs-toggle="tab" href="#webs" role="tab" aria-controls="webs" aria-selected="false">系统服务</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="projects-tab" data-bs-toggle="tab" href="#projects" role="tab" aria-controls="projects" aria-selected="false">项目服务</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="here-tab" data-bs-toggle="tab" href="#here" role="tab" aria-controls="here" aria-selected="false">我在这里</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="friends-tab" data-bs-toggle="tab" href="#friends" role="tab" aria-controls="friends" aria-selected="false">朋友链接</a>
        </li>
        <li class="nav-item" role="presentation">
            <a class="nav-link" id="tools-tab" data-bs-toggle="tab" href="#tools" role="tab" aria-controls="tools" aria-selected="false">工具导航</a>
        </li>
    </ul>

    <!-- 内容区 -->
    <div class="tab-content mt-3" id="myTabContent">
        <div class="tab-pane fade show active" id="urls" role="tabpanel" aria-labelledby="urls-tab">
            <?php echo renderTabContent($urlsTree); ?>
        </div>

        <div class="tab-pane fade" id="webs" role="tabpanel" aria-labelledby="webs-tab">
            <?php echo renderTabContent($websTree); ?>
        </div>

        <div class="tab-pane fade" id="projects" role="tabpanel" aria-labelledby="projects-tab">
            <?php echo renderTabContent($projectsTree); ?>
        </div>

        <div class="tab-pane fade" id="here" role="tabpanel" aria-labelledby="here-tab">
            <?php echo renderTabContent($hereLinksTree); ?>
        </div>

        <div class="tab-pane fade" id="friends" role="tabpanel" aria-labelledby="friends-tab">
            <?php echo renderTabContent($friendLinksTree); ?>
        </div>

        <div class="tab-pane fade" id="tools" role="tabpanel" aria-labelledby="tools-tab">
            <?php echo renderTabContent($toolsTree); ?>
        </div>
    </div>
</div>

<style>
/* 设置中间的 main 区域 */
.main-container {
    position: relative;
    padding: 30px 80px;
    margin: 10px 100px;
    height: 100vh;
    max-width: 90vw;
    overflow-y: auto;
    background-color: #f8f9fa;
    color: #333333;
}

.main-container .card {
    border: none;
    border-radius: 10px;
    transition: transform 0.3s, box-shadow 0.3s;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

.main-container .children {
    display: flex;
    flex-wrap: wrap;
    border-top: 1px solid #e9ecef;
    padding-top: 10px;
}

.main-container .children a {
    font-size: 0.9em;
    color: var(--tab-color);
    transition: color 0.3s, transform 0.3s;
    display: flex;
    align-items: center;
    border: 1px solid var(--tab-color);
    border-radius: 5px;
    margin: 5px;
    padding: 10px 15px;
    min-width: 140px;
    text-decoration: none;
    position: relative;
}

.main-container .children a:hover {
    color: #0056b3;
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(0, 123, 255, 0.5);
}

/* 流光效果 */
@keyframes shine {
    0% {
        background-position: -200%;
    }
    100% {
        background-position: 200%;
    }
}

.main-container .children a::before {
    content: '';
    position: absolute;
    top: 0;
    left: -0%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0) 50%, rgba(255, 255, 255, 0.4) 100%);
    animation: shine 1.5s infinite;
    z-index: -1;
    opacity: 0;
}

.main-container .children a:hover::before {
    opacity: 1;
}

.main-container .nav-tabs {
    list-style: none;
    padding: 0;
    display: flex;
    border-bottom: 2px solid var(--tab-color);
}

.main-container .nav-link {
    text-decoration: none;
    padding: 10px 15px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 5px;
    color: var(--tab-color);
    transition: background 0.3s, border-color 0.3s;
}

.main-container .nav-link:hover {
    background: rgba(0, 123, 255, 0.1);
    border-color: var(--tab-color);
}

.main-container .nav-link.active {
    background: var(--tab-active-bg);
    color: var(--tab-active-color);
}

.main-container .tab-content {
    margin-top: 20px;
}

.main-container .tab-pane {
    display: none;
}

.main-container .tab-pane.show {
    display: block;
}

.main-container .card {
    max-height: 350px;
    overflow: hidden;
}

.main-container .children a i {
    margin-right: 10px;
}

/* 自定义颜色变量 */
:root {
    --tab-bg: #007bff;
    --tab-active-bg: var(--tab-bg);
    --tab-active-color: white;
    --tab-color: var(--tab-bg);
}

/* 媒体查询支持深色模式 */
@media (prefers-color-scheme: dark) {
    :root {
        --tab-bg: #00aaff;
    }
}

@media (prefers-color-scheme: light) {
    :root {
        --tab-bg: #007bff;
    }
}
</style>
